<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

	<!-- Basic Page Needs
  ================================================== -->
	<meta charset="utf-8">
	<title>Your Page Title Here</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Mobile Specific Metas
  ================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!-- CSS
  ================================================== -->
	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/multi-select.css">

	<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->


</head>
<body>
	<div class="container">
    <header>
        <div class="top-header">
	        <div class="page-content clearfix">
            	<a href="#" class="logout">
                	<span></span>
                    Logout 
                </a>
                <div class="user-name">
                	Welcome, Joseph
                </div>
                <input type="submit" value="">
                <input type="text" placeholder="Search">
                
                <div class="news-ticker-title">اخر الاخبار</div>
                <div class="news-list">
					<ul>
		<li>
        <a href="news.html">
			الاستخبارات الأمريكية: ظهور جماعة في سوريا لا تقل خطورة عن" داعش" - موقع الأخبار اليوم
             
             </a>
        </li>
		<li>
        <a href="news.html">
        	لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .
             
             </a>
        </li>
        <li>
        <a href="news.html">
        	لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .
             
             </a>
        </li>
        <li>
        <a href="news.html">
        	لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .
             
             </a>
        </li>
        <li>
        <a href="news.html">
        	لوريم إيبسوم هو ببساطة نص شكلي مايكر"  والتي حوت أيضاً على نسخ من نص لوريم .
             
             </a>
        </li>
	</ul>
				</div>
            </div>
        </div>
        <div class="page-content clearfix">
    	<h1 class="logo">
        	<a href="#">
            	FUEBOOK
                <span></span>
            </a>
        </h1>
        <a href="#" class="website-name"></a>
        
        <div class="quote">
        	<span class="quote-left"></span>
            <span class="quote-right"></span>
        	In every CHOICES that we choose, There's always a RISK; But always 
			remember that there's also a chance - Kent Solatorio Lopez 
        </div>
        <figure class="user-image">
	        <img src="images/user.png" alt="">
        </figure>
    </div>
    </header>
    <section class="content clearfix">
    	<div class="page-content">
	        <div class="colored-sections">
            	<a href="#" class="section green">
                	<div class="details">
                    	<h3>My Stuff</h3>
                        <p>
                        	Lorem ipsum dolor sit amet
							adipiscing elit
                        </p>
                    </div>
                </a>
                <a href="#" class="section gray">
                	<div class="details">
                    	<h3>Evaluation</h3>
                        <p>
                        	Lorem ipsum dolor sit amet
							adipiscing elit
                        </p>
                    </div>
                </a>
                <a href="#" class="section red">
                	<span class="messages-count">17</span>
                	<div class="details">
                    	<h3>Inbox</h3>
                        <p>
                        	Lorem ipsum dolor sit amet
							adipiscing elit
                        </p>
                    </div>
                </a>
                <a href="#" class="section orange">
                	<div class="details">
                    	<h3>Moodle</h3>
                        <p>
                        	Lorem ipsum dolor sit amet
							adipiscing elit
                        </p>
                    </div>
                </a>
            </div>
            <div class="clearfix content-area">
            	<aside class="left-col">
                	<nav>
                    	<ul>
                        	<li>
                            	<a href="#">Home</a>
                            </li>
                            <li>
                            	<a href="javascript:void(0)">Profile</a>
                                <ul>
                                	<li>
                                    	<a href="#">Main Data</a>
                                    </li>
                                    <li class="current">
                                    	<a href="#">Contact Information</a>
                                    </li>
                                    <li>
                                    	<a href="#">Privacy Settings</a>
                                    </li>
                                    <li>
                                    	<a href="#">My Groups</a>
                                    </li>
                                    <li>
                                    	<a href="#">Researches</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                            	<a href="javascript:void(0)">Academics</a>
                                <ul>
                                	<li>
                                    	<a href="#">Academic Information</a>
                                    </li>
                                    <li>
                                    	<a href="#">Result</a>
                                    </li>
                                    <li>
                                    	<a href="#">Early Registraion</a>
                                    </li>
                                    <li>
                                    	<a href="#">Alumni</a>
                                    </li>
                                    <li>
                                    	<a href="#">My Bill Payments</a>
                                    </li>
                                    <li>
                                    	<a href="#">My Attendance</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                            	<a href="javascript:void(0)">Activities</a>
                                <ul>
                                	<li>
                                    	<a href="#">Messaging</a>
                                    </li>
                                    <li>
                                    	<a href="#">My Club</a>
                                    </li>
                                    <li>
                                    	<a href="#">E-Library</a>
                                    </li>
                                    <li>
                                    	<a href="#">Market Place</a>
                                    </li>
                                    <li>
                                    	<a href="#">Gallery</a>
                                    </li>
                                    <li>
                                    	<a href="#">FaceBook Gallery</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                    
                    <h3>
                    	Ask-me
                        <span class="toggle-show"></span>
                    </h3>
                    <div class="ask hidden-box">
                    <textarea></textarea>
                    <input type="submit" value="Ask">
                    </div>
                </aside>
                <!-- main content -->
                <article class="main-content">
                	<header>
                        <h2>
                            Messaging
                        </h2>
                    </header>
                    <div class="mail-actions clearfix">
                    	<a href="messaging-newMail.html" class="new-message">new message</a>
                        <a href="messaging-inbox.html" class="switch">INBOX</a>
                        <a href="messaging-outbox.html" class="switch">OUTBOX</a>
                        <div class="mail-search">
                        	<input type="text" placeholder="Search" />
                            <input type="submit" value="" />
                        </div>
                    </div>
                    <div class="messaging-body">
                    	<h3>
                        	New Message
                        </h3>
                        
                        <div class="editor">
                        <div class="message-subject clearfix">
                        	<label for="sub"><a href="#">To</a></label>
                            <input type="text" id="sub" />
                        </div>
                        <div class="message-subject clearfix">
                        	<label for="sub">Subject</label>
                            <input type="text" id="sub" />
                        </div>
                        <textarea></textarea>
                        <input type="submit" class="send" value="Send" />
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>
    </div>
	<footer>
    	<div class="footer-line"></div>
        Copyright © 2014[Future University in Egypt]. All rights reserved.
    </footer>
	<script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.easy-ticker.js"></script>
	<script src="js/jquery.multi-select.js"></script>
    <script src="js/multiselect.js"></script>
    <script src="js/main.js"></script>
</body>
</html>